<!-- <template>
  <div class="content">
    <el-transfer
      v-model="rightValue"
      filterable
      :props="{
        key: 'id',
        label: 'name',
        disabled: ''
      }"
      :titles="['待选', '已选']"
      :data="userList"
    >
      <template #default="{ option }">
        <span>{{ option.name }}&nbsp;({{ option.companyName }})</span>
      </template>
    </el-transfer>
    <div class="form__footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template> -->
<template>
  <div class="content">
    <div class="content__header">
      <el-input
        @input="filterChange"
        style="width: 200px; margin-bottom: 10px"
        clearable
        placeholder="请输入用户姓名"
        v-model="inputValue"
      >
        <template #prefix>
          <i class="el-icon-search"></i>
        </template>
      </el-input>
    </div>
    <el-transfer
      class="content__transfer"
      target-order="unshift"
      v-model="rightValue"
      @change="transferChange"
      :titles="['待选', '已选']"
      :data="currentPageDatas"
      :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}' }"
    >
      <template #left-footer>
        <el-pagination
          small
          align="right"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          :total="page.total"
          layout="prev,pager, next"
        ></el-pagination>
        <!-- :pager-count="5" -->
      </template>
    </el-transfer>
    <div class="form__footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineProps, toRef, reactive } from "vue";
import { getUserList } from "/@/api/user";

const emit = defineEmits(["emitAddUser", "update:dialogVisibleTransferAdd"]);
const props = defineProps({
  currentUsers: {
    type: Array,
    default: () => []
  }
});

let currentPageDatas = ref([]);
let currentDatas = ref([]);
let sourceDatas = ref([]);
let page = reactive({ pageNum: 1, pageSize: 100, total: 0 });
let rightValue = ref([]);
let inputValue = ref("");

// let userList = ref([]);
// let rightValue = ref([]);

const propUser = toRef(props, "currentUsers");

rightValue.value = propUser.value.map(item => {
  return Number(item);
});

// 真实请求
const getTableData = async (obj: object = {}) => {
  try {
    const { code, data } = await getUserList(obj);
    if (code === 200) {
      var currentDatasCopy = data.list.map(value => {
        return {
          label: `${value.name}  ${value.companyName}`,
          key: value.id,
          obj: value,
          name: value.name
        };
      });

      page.total = currentDatasCopy.length;
      currentDatas.value = currentDatasCopy;
      sourceDatas.value = currentDatasCopy;
      //初始化20条数据给当前第一页的变量
      currentPageDatas.value = currentDatasCopy.slice(0, 100);
    }
  } catch (err) {
    console.log(err);
  }
};

//分页change
const handleCurrentChange = val => {
  //先将选中的从当前数据过滤掉
  page.pageNum = val;
  currentDatas.value = currentDatas.value.filter(function (value) {
    return !rightValue.value.includes(value.key);
  });
  //再将过滤好的当前数据选出指定页
  currentPageDatas.value = groupFunc(val);
  //再将选中的目标数组补给当前页变量，从而保证之前选的数据能显示
  if (currentPageDatas.value) {
    currentPageDatas.value = currentPageDatas.value.concat(
      sourceDatas.value.filter(function (val) {
        return rightValue.value.includes(val.key);
      })
    );
  }
};
//穿梭change
const transferChange = (current, direction) => {
  //为了保证数据的一致性，目标数组还回来之后要插进当前数据变量
  if (direction == "left") {
    currentDatas.value = sourceDatas.value.filter(function (val) {
      return !current.includes(val.key);
    });
    let arrLength = currentDatas.value.length;
    page.total = arrLength;
  }
};

//穿梭搜索
const filterChange = query => {
  //自定义搜索，从当前数组变量中过滤，再渲染回组件
  var currentDatasCopy = sourceDatas.value.filter(function (val) {
    return (
      val.obj.name.indexOf(query) > -1 && !rightValue.value.includes(val.key)
    );
  });
  if (currentDatasCopy.length != currentDatas.value.length) {
    currentDatas.value = currentDatasCopy;
    handleCurrentChange(1);
  }
};

//数组分组函数
const groupFunc = val => {
  var currentDatasCopy = [];
  let arrLength = currentDatas.value.length;
  page.total = arrLength;
  let num = 100;
  let index = 0;
  for (let i = 0; i < arrLength; i++) {
    if (i % num === 0 && i !== 0) {
      currentDatasCopy.push(currentDatas.value.slice(index, i));
      index = i;
    }
    if (i + 1 === arrLength) {
      currentDatasCopy.push(currentDatas.value.slice(index, i + 1));
    }
  }
  return currentDatasCopy[val - 1];
};

const handleSubmit = async () => {
  const flterList = [];
  if (rightValue.value.length) {
    rightValue.value.forEach(item => {
      currentPageDatas.value.forEach(i => {
        if (item === i.key) {
          flterList.push(i.name);
        }
      });
    });
  }
  console.log(flterList, "flterList");
  emit("emitAddUser", { idList: rightValue.value, nameList: flterList.join() });
};

const handleCancel = () => {
  emit("update:dialogVisibleTransferAdd", false);
};
getTableData({
  pageNum: 1,
  pageSize: 10000
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .content__header {
    width: 200px;
    margin-bottom: 10px;
    width: 80%;
  }
  .content__transfer {
    padding: 0;

    :deep .el-transfer-panel__list {
      padding: 6px 0 60px 0px;
    }
    :deep .el-transfer-panel .el-transfer-panel__footer {
      bottom: -15px;
    }
    :deep .el-checkbox {
      margin-right: 0;
    }
    :deep .el-transfer-panel .el-transfer-panel__header {
      height: 0;
      line-height: 0;
      display: none;
    }

    :deep .el-transfer__buttons {
      padding: 0 15px;
    }
    :deep .el-button {
      display: block;
      border-radius: 50%;
      height: 40px;
      width: 40px;
      padding: 0;
      border-radius: 50%;
    }
    :deep .el-transfer__button:nth-child(2) {
      margin: 0;
    }
  }
  .form__footer {
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
